Quien conoce a Feraluj de Tuba Libre sabe que es una persona emprendedora, capaz de mantener un blog, y simultáneamente escribir en Ecos de la Costa periódico de Colima, México.
Precisamente yo le conocí cuando un buen día me informa que Gem@ BLOG sería el tema para ese domingo 30 de Septiembre en su columna de Ecos de la Costa.
Estas cosas nos gustan a todos, nos motivan para añadir más ilusión a lo que hacemos y yo no soy menos.
Feraluj sigue cada días más involucrado en la blogosfera, tanto es así que ya tiene su propio directorio de blogs.
Bitácoras Hispanas Un nuevo directorio que nos presenta de la siguiente forma:
"Bienvenidos a Bitácoras hispanas"
"Iniciamos este proyecto, donde se pretende agregar bitácoras de lengua española de todo el mundo, no importa el país o la lengua materna, lo importante es que estén escritas en español.
La alta en el directorio está sujeta a una revisión de cada bitácora o blog hispano propuesto y si está de acuerdo con las directrices de Bitácoras Hispanas será dado de alta lo antes posible"
Conocidos bloggers ya se han sumado a este nuevo directorio, si quieres dar a conocer tu espacio, o descubrir nuevos amigos y sitios de interés ingresa para formar parte de Bitácoras Hispanas.
Para inscribirse no es necesario más de 5 minutos, Bitácoras Hispanas te solicita que incluyas en tu blog el botón del directorio. Es lo menos que podemos hacer para dar a conocer el directorio y con ello darnos a conocer nosotros mismos.
Feraluj también anima a que votemos por las bitácoras visitadas, cada mes se escogerá la bitácora del mes (la que mayor cantidad de votos positivos obtenga) se publicará en Bitácoras Hispanas, en el periódico Ecos de la Costa de Colima, México y en el blog de nuestro editor feraluj, Tuba Libre.
Bienvenidos a todos y suerte en esta nueva andadura Feraluj
Colorhunter (Extraer los colores de una imagen) |
|
▼ |
Me ha gustado mucho Colorhunter es una aplicación donde ingresando la url de una imagen o subiéndola desde nuestro PC extrae los colores de la imagen, cuando visionamos los colores de nuestra imagen podemos ver a la derecha un icono cuya finalidad es conseguir esos mismos colores con menos brillo o intensidad.
Es muy útil si tratamos de buscar un color acorde con cualquier imagen, para la letra de nuestro blog o con fines decorativos para nuestra plantilla.
Posee una amplia nube de tags que nos brinda la posibilidad de encontrar colores originales y poco vistos en cualquier paleta de colores.
Imágenes en las etiquetas |
|
▼ |
Hace poco me preguntaban la forma de añadir imágenes en las etiquetas. No era tan sencillo, no se trataba de aplicar una imagen para todas las categorías, sino de una imagen especifica para cada categoría.
Estuve hurgando en la plantilla, y para qué engañarnos y decir que tenía una pequeña idea de como hacerlo si en realidad no sabía por donde empezar.
Como suele ser habitual busqué información, no encontré nada sobre el tema, al final tuve que abusar una vez más de la amabilidad de J.Miur de Vagabundia y su respuesta no se hizo de esperar.
Sigilosamente tomé nota de los datos que proporciona sobre el tema, pero aún así les recomiendo leer sus explicaciones que estoy segura supera con creces la que yo pueda dar.
Para empezar deberemos buscar un alojamiento que nos proporcione una url fija para las imágenes, es decir un lugar donde al subir las imágenes tengan todas la misma dirección exceptuando el nombre de las imágenes.Yo las he alojado en Google Pages pero J.Miur nos informa que en Photobucket, Fileden y Hostfile también pueden conseguir una url fija.
Una url fija sería:
http://nombre.servidor/imagen.extensión
Todas las imágenes deben tener la misma extensión y formato, da igual sea jpg. gif. png. pero todas la misma. Lo único que cambiará es el nombre del archivo.
Si por ejemplo queremos añadir una imagen a la etiqueta de herramientas el archivo de la imagen debe llamarse herramientas y así sucesivamente con todas las imágenes.
Otro ejemplo:
http://forevergema.googlepages.com/herramientas.png
forevergema es el nombre que tengo asignado en el servidor
googlepages.com/ el servidor
herramientas el nombre del archivo
.png es la extensión
J.Miur explica dos lugares donde añadir las imágenes para las etiquetas, una sería en el listado de la sidebar y otra justo debajo de la entradas.
Yo voy a explicar la segunda que parece ser la que estamos más predispuestos a "decorar"
Nos situaremos en nuestra plantilla y clicaremos en Edición HTML, marcaremos la casilla para expandir la plantilla de artilugios y buscaremos lo siguiente:
Lo que sigue a continuación puede variar de unas plantillas a otras, yo voy a añadirlo según J.Miur y a continuación lo que aparece en la plantilla Minima que es la mía.
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
Esta parte es la que hay que buscar en la plantilla Minima y donde yo tuve que hacer la modificación:
<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>
De cualquiera de las formas las modificaciones son las mismas, se trata de
sustituir el texto de la categoría por una imagen y para ello eliminaremos <data:label.name/> y en su lugar añadiremos:
<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>
También vamos a suprimir la coma de separación que encontraremos en la línea donde dice:
<b:if cond='data:label.isLast != "true"'>,</b:if>
Si deseamos añadir las imágenes sin suprimir el texto de la categoría lo haremos suprimiendo de la misma forma <data:label.name/> y en su lugar añadiremos:
<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/> <data:label.name/>
Roundpic (Esquinas redondas en las imágenes) |
|
▼ |
Rroundpic es una herramienta que nos brinda la posibilidad de dar forma redondeada a las esquinas de cualquier imagen, la podemos subir desde nuestro PC o ingresando la Url de la imagen.
También existe la posibilidad de modificar el tamaño y color de fondo, todo ello en unos sencillos pasos.
BIGHUGELabs (Generador con imágenes de nuestro PC) |
|
▼ |
Los generadores siempre son una herramienta para socorrernos en caso de necesitar una imagen distinta, más personalizada.
En BIGHUGELabs podemos conseguir imágenes como las del ejemplo:
Lo siguiente es una buena idea para regalar, se trata de hacer una carátula personalizada con una fotografía, un trocito de cartulina y mucho cariño.
Y algo curioso, cuando subimos una imagen desde nuestro PC nos proporciona una paleta con los colores que predominan en la fotografía, de esta forma facilita saber el código de un color en concreto.
Traductor multilingüe |
|
▼ |
Copia y pega el siguiente código en tu blog para obtener un traductor multilingüe como el de la imagen. Debes modificar donde dice http://tublog.blogspot.com/ por la url de tu blog.
<img src="http://img176.imageshack.us/img176/6091/84056383at1.png"/>
<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="ES" name="wl_srclang" type="hidden"/>
<select style="font-size: 90%; width: 170px;" name="wl_trglang">
<option value="EN"/>Español - Inglés
<option value="FR"/>Español - Francés
<option value="DE"/>Español - Alemán
<option value="IT"/>Español - Italiano
<option value="PT"/>Español - Portugués
<option value="RU"/>Español - Ruso
</select>
<input value="http://tublog.blogspot.com/" name="wl_url" type="hidden"/>
<input style="font-size: 90%; width: 70px;" value="Traduce" type="submit"/>
</form>
Si tu blog tiene color de fondo quizás te gustaría saber que añadiendo unas líneas de código justo antes de ]]></b:skin> puedes cambiar el aspecto del buscador respecto a color de fondo y bordes.
form#translateForm select {
background-color:#000;
color:#ddd;
border:1px solid #999;
}
form#translateForm input {
background-color:transparent;
color:#ddd;
border:1px solid #999;
}
Espero le sea útil Mr Prado
Mostrar comentarios en la misma entrada. |
|
▼ |
Siempre digo que una de las cosas más tiempo me lleva es encontrar un título acorde con la entrada. Se intenta que el título transmita claramente de qué trata la entrada y a su vez que sea lo más breve posible. (Esta vez ni lo uno ni lo otro)
Cuando clicamos en el link de comentarios desde la página principal, de archivos y etiquetas este nos manda al formulario de comentarios que Blogger trae por defecto, lo que nos condiciona a salir de la página y visualizarlos de esta forma:
Si deseamos que al clicar en "comentarios" estos se visionen al pie de la entrada haremos lo siguiente.
Accedemos a nuestra Plantilla/Edición HTML para luego Expandir plantillas de artilugios
Buscamos el siguiente código:
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
Y lo sustituimos por este otro:
<a class='comment-link' expr:href='data:post.url + "#comments"'>
Guardamos los cambios y ya podemos visualizarlos en la página principal de nuestro blog.
Fuente: Francisco de Blog and Web
Rollover (Imagen que cambia al pasar el cursor) |
|
▼ |
A petición de Pedro vamos a aplicar un efecto que al pasar el cursor sobre una o más imágenes de nuestro blog, cambian dinámicamente y cuando el cursor se va de ésta, vuelve a su estado inicial. A este efecto se le llama rollover.
Lo primero que haremos será situarnos en nuestra plantilla Edición de HTML y justo antes de </head> vamos a añadir el siguiente script:
<script language="JavaScript" type="text/javascript">
imagenOn = new Image(300,300);
imagenOn.src = "images/avatar2.gif";
</script>
Guardamos los cambios y nos vamos al lugar donde deseamos añadir la imagen con efecto rollover. En este caso lo hacemos en una entrada.
Copiamos y pegamos lo siguiente:
<a href= "#" onclick="returnfalse;" onmouseover="document.ejemplo.src='url-imagen';" onmouseout="document.ejemplo.src='url-imagen';">
<IMG name="ejemplo" src="url-imagen-1ª" alt = "ejemplo de rollover"width="300" height="300" border= "0">
</a>
En url-imagen añadiremos la url de las imágenes que harán el efecto rollover, o sea cambiarán al pasar el cursor.
Donde url-imagen-1ª será la url de la imagen que aparecerá cada vez que carguemos la página.
Si en lugar de esa primera imagen deseamos un texto bastará con suprimir la url y añadir un texto donde dice ejemplo de rollover
En height="300" width="300" cambiaremos el valor por el tamaño deseado para las imágenes.
Si deseamos añadir en una misma página más de un rollover deberemos añadir un nombre diferente a cada rollover. Por ejemplo donde dice "document.ejemplo" y IMG name="ejemplo" lo cambiaremos por "document.ejemplo1" y IMG name="ejemplo1"
BlogBackupOnline (Copia de seguridad del blog) |
|
▼ |
BlogBackupOnline es una herramienta gratuita que guarda copia de seguridad de todas las entradas y comentarios.
Una de las comodidades que presenta es que una vez nos registramos se ejecuta un backup completo, a partir del primer backup completo, deberemos de activar los backups diarios y ya no tenemos que estar pendiente de hacer nuevas copias del blog.
Permite descargar el contenido de la copia de seguridad a nuestro PC en un archivo XML y tiene una capacidad de 50 MB de almacenamiento.
Algo que valoro mucho en una página es el detalle de poder escoger idioma lo podemos hacer en la parte superior derecha de la página.
Más sobre copias de seguridad:
Vagabundia BlogBackupOnline Backup de Blogger
blogmundi: Copias de seguridad y tu blog.
!Suerte Mariajo¡
Xyberneticos (Diseño, recursos y desarollo) |
|
▼ |
Xyberneticos cambia de aspecto, es increíble lo que puede hacerse cuando se entiende de diseño y se tiene imaginación, aunque bien mirado creo que su autor Nikko, lo que le sobra es precisamente eso.. imaginación y buen gusto.
Si nunca visitaron Xyberneticos ya es hora que lo vayan haciendo, la variedad en su contenido les hará regresar.
Signatures (Imágenes infantiles con texto) |
|
▼ |
Signatures es una de esas páginas que pasamos de largo y pensamos que de poco puede servirnos. Yo pensé en esas páginas infantiles y a veces no tan infantiles que gusta de decorar con alguna imagen como las del ejemplo.
Signgenerator (Marca de agua en las imágenes) |
|
▼ |
Tendremos que añadir la Url de la imagen que deseamos marcar en URL to GIF/JPG
Ingresar el texto para la imagen de agua en Custom watermark
En las coordenadas X y Y añadiremos el valor en pixels para ubicar el lugar de la marca de agua.
Y por último clicar en Customize Image
Picasion Imágenes animadas GIF |
|
▼ |
Efecto de agua en tus imágenes |
|
▼ |
En el blog de SM4C he visto un bonito efecto de agua para las imágenes. Decidí probar para ver los resultados y aquí lo tienen:
Para conseguir ese efecto, así como el de lluvia o gotas es necesario descargarse SqirlzReflect pueden hacerlo desde su página o directamente desde aquí.
Una vez lo tengan instalado el manejo de SqirlzReflect es muy sencillo, pero aún así Daemon ha creado un tutorial que sin duda nos pone las cosas más sencillas.
Ver tutorial de Daemon.
Sustituir texto de "Publicar un comentario" por una imagen. |
|
▼ |
Hace días que Roger Wright me preguntó la forma de sustituir el texto de "Publicar un comentario en la entrada" por una imagen o botón. Tuve mis dudas al respecto y consultado a J.Miur resulta que estaba en lo cierto, pero siempre se agradece una explicación clara y concisa.
Para situarnos en la plantilla donde deberemos añadir esa imagen accederemos a Edición de HTML y marcaremos en nuestra plantilla "Expandir plantilla de artilugios.
Buscaremos:
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data: post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
El dato interno que Blogger tiene para el texto de "Publicar un comentario en la entrada" es el correspondiente a <data:postCommentMsg/>
Podemos sustituir esa parte por un texto o imagen.
De manera que quedaría así:
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data: post.addCommentOnclick'><img src="url-de-la-imagen"/></a>
</p>
Guardamos los cambios y este sería más o menos el resultado con una imagen tipo botón:
Y eso es todo !Suerte¡